<template>
  <div class="addQuestion">
    <el-dialog :visible.sync="dialogFormVisible" center fullscreen>
      <div slot="title" class="title">新增题库测试</div>

      <div class="main-add">
        <el-form :model="form" label-width="80px" label-position="left" :rules="rules" ref="form">
          <el-form-item label="学科" prop="subject">
            <el-select v-model="form.subject">
              <el-option
                v-for="(item, index) in subjectList"
                :key="index"
                :value="item.id"
                :label="item.short_name"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item prop="step" label="阶段">
            <el-select v-model="form.step">
              <el-option
                v-for="(value, key, index) in steps"
                :key="index"
                :label="value"
                :value="+key"
              ></el-option>
            </el-select>
            <!-- <el-select v-model="from.step"> -->
            <!-- <el-option></el-option> -->
            <!-- </el-select> -->
          </el-form-item>

          <el-form-item prop="enterprise" label="企业">
            <el-select v-model="form.enterprise">
              <el-option
                v-for="(item, index) in enterpriseList"
                :key="index"
                :value="item.id"
                :label="item.short_name"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item prop="city" label="城市">
            <!-- props 指定选项标签为选项对象的某个属性值 -->
            <!-- {{form.city}} -->
            <el-cascader :options="options" :props="{value: 'label'}" clearable v-model="form.city"></el-cascader>
          </el-form-item>

          <el-form-item prop="type" label="题型">
            <el-radio-group v-model="form.type">
              <el-radio v-for="(value,key,index) in typeObj" :key="index" :label="+key">{{value}}</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item prop="difficulty" label="难度">
            <el-radio-group v-model="form.difficulty">
              <el-radio
                v-for="(value,key,index) in difficulties"
                :key="index"
                :label="+key"
              >{{value}}</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-divider></el-divider>

          <el-form-item prop="title" label="试题标题">
            <!-- 富文本编辑器 -->
            <quillEditor
              v-model="form.title"
              :options="{placeholder: '请在这里输入...'}"
              @change="validateItem('title')"
            ></quillEditor>
          </el-form-item>

          <el-form-item :label="typeObj[form.type]" :prop="typeAnswer[form.type]">
            <allSelect :form="form" @validateItem="validateItem" class="noerror"></allSelect>
          </el-form-item>

          <el-divider></el-divider>

          <el-form-item label="解析视频" prop="video">
            <uploadImg v-model="form.video" type="video"></uploadImg>
          </el-form-item>

          <el-divider></el-divider>

          <el-form-item label="答案解析" prop="answer_analyze">
            <quillEditor v-model="form.answer_analyze" @change="validateItem('answer_analyze')"></quillEditor>
          </el-form-item>

          <el-form-item label="答案备注" prop="remark">
            <el-input v-model="form.remark" type="textarea" autosize></el-input>
          </el-form-item>
        </el-form>
      </div>

      <div slot="footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="submit">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { regionData } from "element-china-area-data";
import { quillEditor } from "vue-quill-editor";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import allSelect from "@/views/home/question/allSelect.vue";
import uploadImg from "@/components/uploadImg.vue";
import { addQuestionData, editQuestionData } from "@/api/question.js";
export default {
  props: ["subjectList", "steps", "enterpriseList", "typeObj", "difficulties"],

  components: {
    quillEditor,
    allSelect,
    uploadImg
  },

  data() {
    return {
      dialogFormVisible: false,
      mode: "add",
      typeAnswer: {
        1: "single_select_answer",
        2: "multiple_select_answer",
        3: "short_answer"
      },
      // initForm: {},
      form: {
        subject: "",
        step: "",
        enterprise: "",
        city: [],
        type: 1,
        difficulty: 1,
        title: "",
        single_select_answer: "", // 单选题答案
        multiple_select_answer: [], // 多选题答案
        short_answer: "", //	简答题答案
        video: "", // 解析视频地址
        answer_analyze: "", // 答案解析
        remark: "", //	答案备注
        // 介绍，图片介绍
        select_options: [
          {
            label: "A",
            text: "",
            image: ""
          },
          {
            label: "B",
            text: "",
            image: ""
          },
          {
            label: "C",
            text: "",
            image: ""
          },
          {
            label: "D",
            text: "",
            image: ""
          }
        ]
      },
      options: regionData,
      rules: {
        subject: [{ required: true, message: "必填", trigger: "change" }],
        step: [{ required: true, message: "必填", trigger: "change" }],
        enterprise: [{ required: true, message: "必填", trigger: "change" }],
        city: [{ required: true, message: "必填", trigger: "change" }],
        type: [{ required: true, message: "必填", trigger: "change" }],
        difficulty: [{ required: true, message: "必填", trigger: "change" }],
        title: [{ required: true, message: "必填", trigger: "change" }],
        single_select_answer: [
          { required: true, message: "必填", trigger: "change" }
        ], // 单选题答案
        multiple_select_answer: [
          { required: true, message: "必填", trigger: "change" }
        ], // 多选题答案
        short_answer: [{ required: true, message: "必填", trigger: "change" }], //	简答题答案
        answer_analyze: [
          { required: true, message: "必填", trigger: "change" }
        ], // 答案解析
        remark: [{ required: true, message: "必填", trigger: "change" }]
      }
    };
  },

  methods: {
    submit() {
      // 全局验证
      this.$refs.form.validate(result => {
        if (!result) {
          this.$message.warning("请填写完整内容");
        } else {
          if (this.mode === "add") {
            addQuestionData(this.form).then(() => {
              this.$message.success("新增试题添加成功");
              this.dialogFormVisible = false;
              this.$emit("search");
            });
          } else {
            editQuestionData(this.form).then(() => {
              this.$message.success("编辑成功");
              this.dialogFormVisible = false;
              this.$emit("getData");
            });
          }
        }
      });
    },

    // 单独验证富文本
    validateItem(str) {
      this.$refs.form.validateField(str);
    }
  },

  watch: {
    dialogFormVisible(newVal) {
      if (!newVal) {
        // 清空表单
        this.form = {
          subject: "",
          step: "",
          enterprise: "",
          city: [],
          type: 1,
          difficulty: 1,
          title: "",
          single_select_answer: "", // 单选题答案
          multiple_select_answer: [], // 多选题答案
          short_answer: "", //	简答题答案
          video: "", // 解析视频地址
          answer_analyze: "", // 答案解析
          remark: "", //	答案备注
          // 介绍，图片介绍
          select_options: [
            {
              label: "A",
              text: "",
              image: ""
            },
            {
              label: "B",
              text: "",
              image: ""
            },
            {
              label: "C",
              text: "",
              image: ""
            },
            {
              label: "D",
              text: "",
              image: ""
            }
          ]
        };
        // this.form = JSON.parse(JSON.stringify(this.initForm))
        // 清除验证
        this.$nextTick(() => {
          this.$refs.form.clearValidate();
        });
      }
    }
  }
};
</script>

<style lang="less">
.addQuestion {
  .el-dialog__header {
    padding: 0;
  }

  .main-add {
    width: 835px;
    margin: 0 auto;
    // auto是相对于width之外的剩余宽度，然后对半分的自适应
  }

  .title {
    height: 54px;
    line-height: 54px;
    text-align: left;
    padding-left: 18px;
    background: linear-gradient(to right, #01c5fa, #1394fa);
    color: #fff;
    font-size: 20px;
    font-weight: 700;
  }

  input.el-input__inner {
    width: 364px;
  }

  .el-form-item__content {
    margin-left: 0px !important;
    .quillEditor {
      width: 835px;
      margin-top: 50px;
    }
  }

  input.el-input__inner {
    width: 477px;
    margin-left: 20px;
  }

  .quill-editor {
    margin-top: 50px;
  }

  .is-error .noerror .el-input__inner {
    border-color: #dcdfe6;
  }
}
</style>